<template>
  <div>
    <div class="search-con clearfix">
      <div class="villag-name">
        <span>小区：</span>
        <!-- 一级 -->
        <el-select
          v-model="villagName"
          clearable
          filterable
          placeholder="请选择"
          @change="selectvillagName"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in villagList"
            :key="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="floor-num">
        <span>楼号：</span>
        <!-- 二级 -->
        <el-select
          v-model="buildingNo"
          clearable
          filterable
          placeholder="请选择"
          @change="selectbuildingNo"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in buildingList"
            :key="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="room-num">
        <span>房间号：</span>
        <!-- 三级 -->
        <el-select
          v-model="houseNo"
          clearable
          filterable
          placeholder="请选择"
          @change="selecthouseNo"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in houseList"
            :key="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>
<script>
// export default {
//     data() {
//         return{

//         }
//     },
//     mounted() {
//         this.getAllvillag() //页面加载根据小区id,获取小区id
//     },
//     methods: {
//         // 请求小区
//         getAllvillag(){


//             let aa=this.$route.query.villageName
//             this.$fetch(api.oneRoomVillage,{}).then(res=>{
//                 console.log(res)
//                 if (res.code === '00000') {
//                     res.data.forEach((res,index) => {
//                         this.villagList[index]={
//                             value:res.villageCode,
//                             label:res.villageName
//                         }
//                     });
//                     this.villageName == aa;
//                     this.getAllbuilding()
//                 }

//             })
//         },
//         // 请求楼栋
//         getAllbuilding(){
//             let params = {
//                 'villageCode':this.villageName
//             }
//             console.log('params',params);
//             this.$fetch(api.oneRoomVillage,params).then(res=>{
//                 console.log('Allbuilding',res);
//                 if (res.code === '00000') {
//                     let arr=[]
//                     res.data.forEach((res,index)=>{
//                          this.villagList[index]={
//                             value:res.villageCode,
//                             label:res.villageName
//                         }
//                     })
//                     this.buildingList = arr
//                     this.getAllhouse()
//                 }
                
//             })
//         },
//         // 请求房间号
//         getAllhouse(){
//             let params = {
//                 'buildingNo': this.buildingNo,
//                 'villageCode': this.villageCode
//             }
//             this.$fetch(api.oneRoomVillage,params).then(res=>{
//                 console.log('houseList',res);
//                  if (res.code === '00000') {
//                     let arr=[]
//                     res.data.forEach((res,index)=>{
//                          arr[index]={
//                             value:String(res.id),
//                             label:Strign(res.houseNo)
//                         }
//                     })
//                     this.buildingList = arr
//                     this.getAllhouse()
//                 }
//             })
//             this.houseList = arr
//         }
//     },

// }
</script>
<style lang="less" scoped>
    .search-con{
        display: flex;
        justify-content: space-around;
    }
</style>    